import React,{Component} from 'react'
import {
    Modal,
    WhiteSpace,
    WingBlank,
    NavBar,
    Icon,
    Tabs,
    Toast,
    Flex,
    List,
    Button,
    Checkbox,
    ListView,
    SegmentedControl,
    Popup
} from 'antd-mobile';
import {connect} from "dva";
import {routerRedux} from "dva/router";
import TimeBuyItem from "./timeBuyItem";
import TimeBuyBottomBar from '../../components/NavBottomBar/TimeBuyBottomBar';
import NavBottomBar from '../../components/NavBottomBar/NavBottomBar';
import MyScroll from '../../components/MyScroll/MyScroll';
import TimeBuyClassItem from './timeBuyClassItem';
import MyListView from '../../components/MyListView/MyListView';
import MyListViewLz from '../../components/MyListViewLz/MyListViewLz';
import NoLazyImg from '../../components/NoLazyImg/NoLazyImg';
import NavTopBar from '../../components/NavTopBar/NavTopBar';
import {timeBuy} from "./timeBuy.less";

class TimeBuyClass extends Component {

    constructor(props) {
        super(props);
        this.state = {
            modal: false,
        };
        this.tabs=[];
        this.curTime = '';
        this.showTime=true;
        this.gcId="";
        this.page=0;
    }

    showModal = (e) => {
        e.preventDefault();
        this.setState({
            modal: true,
        });
    }
    onClose = () => {
        this.setState({
            modal: false,
        });
    }
    componentDidMount(){
        this.refresh();
    }

    refresh = () => {
        this.props.dispatch({type:"timeBuy/timeBuyGoodsClassEFF"}).then(result=>{
            const {goodsClassEntityFlashList=[]} =this.props.timeBuy;
            goodsClassEntityFlashList.map((item,i)=>{
                this.tabs.push({title:item.name,id:item.id,})
            });
            this.gcId = goodsClassEntityFlashList[0].id;
            console.log(this.gcId)
            this.Refresh();
        })
    };
    Refresh = () => {
        console.log(this.gcId)
        this.curTime="";
        return this.props.dispatch({ type: 'timeBuy/timeBuyIdClassGoodsEFF',obj:{gcId:this.gcId,pageNo:1} });
    };
    LoadMore = () => {
        this.curTime="";
        return this.props.dispatch({ type: 'timeBuy/timeBuyIdClassGoodsEFF', obj:{gcId:this.gcId,pageNo:this.props.timeBuy.pageNo+1} });
    }
    renderContent = tab =>{
        const {dispatch} = this.props;
        const { timeBuyIdClassGoodsList=[]} = this.props.timeBuy;
        if(timeBuyIdClassGoodsList[0]) {
            return <MyListViewLz
                style={{marginBottom: "1rem", background: "#fff", height: "100%"}}
                getAlloyTouch={this.getAlloyTouch}
                refresh={this.Refresh}
                kid={tab.id}
                loadMore={this.LoadMore}
                hasMore={this.props.timeBuy.pageNo * this.props.timeBuy.pageSize < this.props.timeBuy.totalRows}
                // itemWrapperClass={ goods_list }
                // bottomStyle={ layoutType == true ? {} : { marginTop:"0.2rem", paddingTop:'0rem' } }
                renderItem={(v, i, a) => {
                    // if (v.startTime != this.curTime) {
                    //     this.showTime = true;
                    //     this.curTime = v.startTime
                    // }
                    // else {
                    //     this.showTime = false;
                    //     // this.curTime = v.startTime
                    // }
                    if(i>0&&a[i].startTime==a[i-1].startTime){
                        this.showTime = false;
                    }else{this.showTime = true;}
                    console.log(this.showTime)
                    return <TimeBuyClassItem dispatch={dispatch} nowTime={this.props.timeBuy.nowTime}
                                             showTime={this.showTime} v={v} key={i}
                                             Refresh={this.RefreshList}></TimeBuyClassItem>
                }}
                data={timeBuyIdClassGoodsList}>
            </MyListViewLz>
        }else{
            return <div className="mei"><span style={{position:"absolute",bottom:"0",left:"30%",fontSize:".3rem"}}>没有可抢的商品呦!</span></div>
        }
    }
    getAlloyTouch = (AT) =>{
        this.AlloyTouch = AT;
    };
    render() {
        const { goodsClassEntityFlashList=[] } = this.props.timeBuy;
        const tabs = this.tabs;
        console.log(this.state.page)
        return <Flex  direction="column"
                   style={{height:"100%"}}
                   className={timeBuy}
            >
                <NavBar
                    style={{ width:"100%", backgroundColor:"#ff0036", color:'#fff',fontWeight:"bolder" }}
                    mode="dark"
                    icon={<Icon key="1" type="left" style={{width:".7rem",height:".7rem"}}/>}
                    onLeftClick={() => {
                        this.props.dispatch(routerRedux.goBack());
                    }}
                    rightContent={<span className="gengduo" onClick={this.showModal}></span>}
                >抢购分类</NavBar>

                    <Tabs tabs={tabs} swipeable={false} initialPage={0} page={this.page}  onChange={(tab, index) => {
                        let Id = tab.id;
                        this.gcId = Id;
                        this.page=index;
                        console.log(this.gcId)
                        this.Refresh()
                    }}
                          renderTabBar={props => <Tabs.DefaultTabBar {...props} page={3} />}>
                        {this.renderContent}
                    </Tabs>

            <Modal
                popup
                visible={this.state.modal}
                onClose={this.onClose}
                animationType="slide-down"
            >
                <Flex justify="around" wrap="wrap" style={{width:"100%",padding:".3rem 0",backgroundColor:"#f3f3f3"}}>
                    {goodsClassEntityFlashList.map((item,i)=>{
                        return <div key={i} style={{width:"25%",textAlign:"center"}}>
                            <div style={{display:"inline-block",textAlign:"center",border:"1px solid #ccc",marginTop:".3rem",backgroundColor:"#fff",borderRadius:".5rem",padding:".05rem .1rem",width:"80%"}}
                                 key={i} onClick={()=>{
                                 this.gcId=item.id;
                                this.Refresh();
                                this.page = i;
                                this.onClose();
                            }}>{item.name}</div>
                        </div>

                    })}
                </Flex>
            </Modal>
            <TimeBuyBottomBar path={ location.pathname }></TimeBuyBottomBar>
            </Flex>


    }
}

export default connect(({ timeBuy}) => ({ timeBuy }))(TimeBuyClass);